<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <button>修改年龄</button>
        <button @click="deleteData">删除name</button>
        <button @click="addData">新增sex</button>

        <p>姓名：{{person.name}}</p>
        <p>年龄：{{person.age}}</p>
        <p>性别：{{person.sex}}</p>
    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    person:{
                        name:'chen',
                        age:'18'
                    }
                }
            },
            //vue上的删除和新增方法
            methods:{
                deleteData(){
                    //新增属性不能写成 delete person.name
                    
                    // 需要使用vue提供的两个方式，一个是存放在实例对象身上，一个是在vue身上
                    // this.$delete(this.person,'name')
                    Vue.delete(this.person,'name')
                },

                addData(){
                    // this.$set(this.person,'sex','男')
                    Vue.set(this.person,'sex','男')
                }


            }
        })
    </script>
</body>
</html>